<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #f1 input {
            width: 100%;
        }

        #f2 input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
        }

        #f3 input {
            width: 100%;
            padding: 12px 20px;
            border: 1px solid seagreen;
            border-radius: 4px;
        }

        #f3 input:focus {
            border: 2px solid red;
            outline: none; /* 取消浏览器默认边框颜色 */
        }

        #f4 button {
            border-radius: 4px;
            border: none; /* 取消浏览器默认边框 */
            padding: 16px 32px;
            cursor: pointer; /* 鼠标悬浮为手势 */
        }

        #f4 button[type=submit] {
            background: #4caf50;
            color: white;
            opacity: 0.7;
        }

        #f4 button[type=reset] {
            background: #f44336;
            color: white;
            opacity: 0.7;
        }

        #f4 button[type=submit]:hover,
        #f4 button[type=reset]:hover {
            opacity: 1.0;
        }
        /* 仅有下边线的输入框 */
        #f5 input {
            /* 显式取消输入框边线 */
            border: none;
            /* 显式取消默认边框 */
            outline: none;
            /* 默认仅显式下边框样式 */
            border-bottom: 1px green solid;
        }
        #f5 input:focus {
            /* 当获取焦点时，下边线变色 */
            border-bottom: 1px red solid;
        }

    </style>
</head>
<body>
<p>input有默认宽度，可自定义</p>
<form id="f1">
    <label>First Name</label> <br>
    <input type="text">
</form>
<hr>
<p>通过padding属性，设置输入与边框之间的距离</p>
<form id="f2">
    <label>Password</label> <br>
    <input type="password">
</form>
<hr>
<p>获取焦点时，改变边框颜色</p>
<form id="f3">
    <label>First Name</label> <br>
    <input type="text">
</form>
<hr>
<p>取消边框，仅显式下边线的输入框</p>
<form id="f5">
    <input type="text">
</form>
<hr>
<form id="f4">
    <button type="submit">提交</button>
    <button type="reset">取消</button>
</form>
</body>
</html>